<script setup>
import { ref } from 'vue'
import { userRegisterService, userLoginService } from '@/api/User'
const isLogin = ref(true)
const loginUser = ref({
  userName: '',
  password: '',
  rePassword: ''
})
const login = async () => {
  console.log('账号是' + loginUser.value.userName + '  密码是' + loginUser.value.password)
  await userLoginService(loginUser.value)
  // console.log('账号是' + loginUser.value.userName + '  密码是' + loginUser.value.password)
}
const zhuce = () => {
  if (loginUser.value.password != loginUser.value.rePassword) {
    alert('二次密码不一致')
  } else {
    userRegisterService(loginUser.value)
  }
}
</script>

<template>
  <div v-if="isLogin">
    登录页面
    <el-form :model="loginUser" label-width="auto" style="max-width: 600px">
      <el-form-item label="用户名" props="userName">
        <el-input
          v-model="loginUser.userName"
          style="max-width: 200px"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item label="密码" props="password">
        <el-input
          v-model="loginUser.password"
          style="max-width: 200px"
          type="password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>
      <el-button type="primary" @click="login()" style="width: 600px"> 登录 </el-button>
    </el-form>
    <el-button @click="isLogin = !isLogin">去注册</el-button>
    <el-button>忘记密码</el-button>
  </div>
  <div v-else>
    注册页面
    <el-form :model="loginUser" label-width="auto" style="max-width: 600px">
      <el-form-item label="用户名" props="userName">
        <el-input
          v-model="loginUser.userName"
          style="max-width: 200px"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item label="密码" props="password">
        <el-input
          v-model="loginUser.password"
          style="max-width: 200px"
          type="password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="确认密码" props="repassword">
        <el-input
          v-model="loginUser.repassword"
          style="max-width: 200px"
          type="password"
          placeholder="请再次输入密码"
          show-password
        />
      </el-form-item>
      <el-button type="primary" @click="zhuce()" style="width: 600px"> 注册 </el-button>
    </el-form>
    <el-button @click="isLogin = !isLogin">去登录</el-button>
  </div>
</template>

<style scoped></style>
